﻿@{
    ViewBag.Title = "首页";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@using A2.ERP.Models;
@using A2.ERP.Models.ViewModels;

@{
    Dictionary<int, string> row1Item = new Dictionary<int, string>()
    {
        { 0, "公告通知" },
        { 1, "最近热销" }
    };

    Dictionary<int, string> row2Item = new Dictionary<int, string>()
    {

        { 2, "本周会议" },
        { 3, "我的问题" }
    };
    
}
<section class="home">
    <div class="grid">
        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-header">
                        商品统计
                        <i class="btn-fold icon SkyUI icon-down float-right"></i>
                    </div>
                    <div class="card-body" style="height:auto">
                        <div class="productsPie" style="width: 500px; height:300px;"></div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card">
                    <div class="card-header">
                        采购统计
                        <i class="btn-fold icon SkyUI icon-down float-right"></i>
                    </div>
                    <div class="card-body" style="height:auto">
                        <div class="appendStockBar" style="width: 500px; height:300px;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            @foreach (var item in row1Item)
            {
                <div class="col">
                    <div class="card">
                        <div class="card-header">
                            @item.Value
                            <i class="btn-fold icon SkyUI icon-down float-right"></i>
                        </div>
                        <div class="card-body">
                            <ul class="list-group list-group-flush">
                                @foreach (t_Notice notice in ((List<t_Notice>)ViewBag.Notices).Where(i => i.Type == item.Key))
                                {
                                    <li class="list-group-item disabled">
                                        <a data-route="\home\noticeDetails\@notice.NoticeID">
                                            @notice.Title
                                            (@notice.CreateDate)
                                        </a>
                                    </li>
                                }

                            </ul>
                        </div>
                    </div>
                </div>
            }
        </div>
        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-header">
                        本周会议
                        <i class="btn-fold icon SkyUI icon-down float-right"></i>
                    </div>
                    <div class="card-body">
                        <ul class="list-group list-group-flush">
                            @foreach (t_Notice notice in ((List<t_Notice>)ViewBag.Notices).Where(i => i.Type == 2))
                            {
                                <li class="list-group-item disabled">
                                    <a data-route="\home\noticeDetails\@notice.NoticeID">
                                        @notice.Title
                                        (@notice.CreateDate)
                                    </a>
                                </li>
                            }
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card">
                    <div class="card-header">
                        我的问题
                        <i class="btn-fold icon SkyUI icon-down float-right"></i>
                    </div>
                    <div class="card-body">
                        <ul class="list-group list-group-flush">
                            @foreach (t_ServiceInfo serviceInfo in ((List<t_ServiceInfo>)ViewBag.ServiceInfo))
                            {
                                <li class="list-group-item disabled">
                                    <a data-route="\home\serviceDetails\@serviceInfo.ID">
                                        @serviceInfo.ServiceTitle
                                        (@serviceInfo.State)
                                    </a>
                                </li>
                            }
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
    ;
    !function () {
        var $btn_down = $('.btn-fold');


        var toggleCard = function (card) {
            var count = 0;
            var $cardBody = $(card.querySelector('.card-body'));

            return function () {
                if (count % 2 === 0)
                    $cardBody.addClass('d-none');
                else
                    $cardBody.removeClass('d-none');

                count++;
            }
        };



        // init products pie components
        $.post('/home/GetProductsStat', function (data) {
            var productsPieOption = {
                title: {
                    text: '各类商品数量',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: data.Columns
                },
                series: [
                    {
                        name: '商品数量',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: data.Data,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            echarts.init(document.getElementsByClassName('productsPie')[0]).setOption(productsPieOption);
        });

        $.post('/home/getappendStockBarStat', function (data) {
            var appendStockBarOption = {
                xAxis: {
                    data: data.Columns
                },
                yAxis: {
                    splitLine: { show: false }  //改设置不显示坐标区域内的y轴分割线
                },
                series: [{
                    name: '汽车采购',
                    type: 'bar',
                    data: data.Data,
                    barWidth: 35,
                    itemStyle: {
                        normal: {
                            //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                            color: function (params) {
                                var colorList = ['rgb(164,205,238)', 'rgb(42,170,227)', 'rgb(25,46,94)', 'rgb(195,229,235)'];
                                return colorList[params.dataIndex];
                            }
                        },
                        //鼠标悬停时：
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                }],
                //控制边距　
                grid: {
                    left: '0%',
                    right: '10%',
                    containLabel: true,
                },
            };
            echarts.init(document.getElementsByClassName('appendStockBar')[0]).setOption(appendStockBarOption);
        })


        $btn_down.each((index, elem) => {
            var currentCard = elem.parentElement.parentElement;
            elem.addEventListener('click', toggleCard(currentCard));
        });
    }();
</script>